<template>
       <div class="freight">
        <div class="filterinput">
            <el-form :model="pageInfo" ref="warehouseFilterForm" :inline="true" label-width="150px" class="demo-ruleForm">
                <el-form-item label="物流公司代码：">
                    <el-input v-model.trim="pageInfo.code"></el-input>
                </el-form-item>
                 <el-form-item label="物流公司名称：">
                    <el-input v-model.trim="pageInfo.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('warehouseFilterForm')">搜索</el-button>
                    <el-button @click="resetForm('warehouseFilterForm')">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="add-more">
            <el-row>
                <el-button @click="addFreightBtn" icon="el-icon-plus" type="primary">添加物流公司</el-button>
                <table-filter :getColumnsRoute="getColumnsRoute"></table-filter>
            </el-row>
            <el-dialog
                :title=showtitle
                :visible.sync="addfreightdialog"
                width="40%"
                center>

                <el-form :model="dlycorp" :rules="rules" ref="addFeightForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="物流公司名称：" prop="name">
                        <el-input v-model.trim="dlycorp.name"></el-input>
                    </el-form-item>
                    <el-form-item label="物流公司代码：">
                        <el-select v-model="dlycorp.code" filterable placeholder="请选择">
                            <el-option
                            v-for="item in codeoptions"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code">
                            </el-option>
                        </el-select>
                        <div class="freightcode">{{dlycorp.code}}</div>
                    </el-form-item>
                    <el-form-item label="自定义代码：">
                        <el-input v-model.trim="dlycorp.custom_code"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="是否禁用">
                        <el-radio-group v-model="dlycorp.is_disabled">
                            <el-radio :label="0">正常</el-radio>
                            <el-radio :label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitFreightForm('addFeightForm')">确 定</el-button>
                    <el-button @click="resetFreightForm('addFeightForm')">取 消</el-button>
                </span>
            </el-dialog>
        </div>

         <table-view
            :collect="true"
            :selection="selectbtnshow"
            :editbtn="selectbtnshow"
            :columns="tableContent"
            :pageList="columnData"
            @collect-hange="collectChange"
            @edit-btn="editClick"
            :filterlist="filterlist"
            ></table-view>

            <pagination-view  :pagesize="pageInfo.pageSize"
            :currentPage="pageInfo.page"
            :total="total"
            @size-change="sizeChange"
            @current-change="pageChange"></pagination-view>
       </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TableFilter from '@/components/TableFilter'
import TableView from '@/components/TableView'
import PaginationView from '@/components/PaginationView'
import { getPrivileges , jurisdictionList } from "@/api/common"

import { getLogisticsList , getLogisticsCodes , saveLogistics, editLogistics} from '@/api/permission'
import { setFav } from '@/api/TableFilter'

export default {
    data () {
        return {
            selectbtnshow:true,
            editBtnMapList: ["save"],  //自定义的按钮内容
            getColumnsRoute : "/api/logistics/getLogisticsList",
            columnData : [],
            total:0,
            pageInfo: {
                page: 1,
                page_size: 20,
                code : '',   //物流公司编码
                name : ''    //物流公司名称
            },
            filterlist:['is_disabled','is_custom'],

            showtitle:"添加物流公司",
            editclickindex: -1, //编辑对应的哪行数据
            addfreightdialog : false,
            codeoptions: [],
            dlycorp: {
                    id: null,
                    name:'',
                    code: '',
                    website: '',
                    // is_disabled: 0,
                    is_custom: 0, //是否自定义
                    custom_code: ''
                },
            rules: {
                name: [
                    { required: true, message: '请输入物流名称', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
            }

        }
    },
    components: {
      PaginationView,
      TableFilter,
      TableView
    },
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.pageInfo.page = 1
              this.getData(this.pageInfo);
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.pageInfo.code = ''
        this.pageInfo.name = ''
      },
      addFreightBtn(){
          this.addfreightdialog = true
          this.editclickindex = -1
          this.showtitle = '添加物流公司'
          this.setDlycorp()
      },
      submitFreightForm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
                if (this.dlycorp.custom_code< 1 && this.dlycorp.code< 1) {
                    this.$message.error('请填写物流公司代码或者自定义代码');
                    return
                }
                if (this.dlycorp.custom_code) {
                   this.dlycorp.is_custom = this.dlycorp.custom_code< 1 ? 0 : 1
                }else{
                   this.dlycorp.is_custom = 0
                }
                saveLogistics( this.dlycorp ).then(res => {
                    this.addfreightdialog = false
                    if (this.editclickindex != -1) {
                        if (this.dlycorp.custom_code> 0) {
                            this.dlycorp.code = this.dlycorp.custom_code
                        }
                        this.$set(this.columnData,this.editclickindex,this.dlycorp)
                    }else{
                        this.getData(this.pageInfo)
                    }
                })
            } else {
                return false;
            }
        });
      },
      resetFreightForm(formName){
          this.addfreightdialog = false
      },
        //拉取列表
      getData(data) {
        getLogisticsList(data).then(res => {
          this.columnData = res.data.list
          this.total = res.data.total || 0
        })
      },
      getLogisticsCodesData(){
        getLogisticsCodes().then(res => {
            this.codeoptions = res.data
        })
      },
      getPrivileges(){
        getPrivileges({route:this.getColumnsRoute}).then(res=>{
            let _data = jurisdictionList(res,this.editBtnMapList)
            this.editBtnMapList = _data.editlist
            this.selectbtnshow = this.editBtnMapList.length > 0 ? true : false
        })
      },
      collectChange(val,index){
          let _data = {
              route : this.getColumnsRoute,
              id : val.id,
              is_fav: val.is_fav ? 0 : 1
          }
          setFav(_data)
          this.columnData[index].is_fav = !val.is_fav
      },
      editClick(val,index){
         this.editclickindex = index
         this.showtitle = '编辑物流公司'
          editLogistics({id: val.id}).then(res => {
              if (res.code === 0) {
                let _resdlycorp = JSON.parse(JSON.stringify(res.data.dlycorp))
                if (res.data.dlycorp.is_custom === 1) {
                    _resdlycorp.custom_code = res.data.dlycorp.code
                    _resdlycorp.code = ''
                }
                 this.setDlycorp('setdlycorp', _resdlycorp)
                 this.addfreightdialog = true
              }
        })
      },
      setDlycorp(type,val){
          if (type === 'setdlycorp') {
              this.dlycorp = val
          }else{
              this.dlycorp = {
                id: null,
                name:'',
                code: '',
                website: '',
                // is_disabled: 0,
                custom_code: ''
            }
          }
      },
      // pageSize变化函数
      sizeChange(val){
        this.pageInfo.page_size = val;
        this.getData(this.pageInfo);
      },
      // page变化函数
      pageChange(val){
        this.pageInfo.page = val;
        this.getData(this.pageInfo);
      },
    },
    computed: {
        ...mapGetters([
            'tableContent'
        ])
    },
    created: function () {
      this.getData(this.pageInfo)
      this.getLogisticsCodesData()
      this.getPrivileges()
    },
}
</script>
<style lang="scss">
    .freight {
        padding: 20px;
        .filterinput{
            margin-top: 22px;
        }
        .add-more{
            .freightcode{
                margin-left: 5%;
                display: inline-block;
                text-align: center;
            }
        }
    }
</style>

